<template>
  <div>
    <div class="pageTitleWhole">
      <a-breadcrumb>
        <a-breadcrumb-item>应收报表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <div id="takeoutMain">
      <a-form layout="inline" :model="form" style="margin-top:0px;">
        <a-form-item label="应收对象">
          <a-select
            style="width:300px"
            show-search
            :show-arrow="false"
            :filter-option="false"
            :default-active-first-option="false"
            not-found-content="请选择"
            v-model="form.custId"
            @search="onSearch"
            @blur="restCustList"
          >
            <a-select-option value>全部</a-select-option>
            <a-select-option
              v-for="(record,index) in custList"
              :key="index"
              :value="record.id"
            >{{ record.name }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="年月">
          <a-range-picker
            format="YYYY-MM"
            :value="value"
            :mode="mode2"
            @panelChange="handlePanelChange2"
            @change="handleChange"
          />
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="check">查询</a-button>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="excelExport">导出Excel</a-button>
        </a-form-item>
      </a-form>
      <a-table
        :columns="columns"
        :loading="loading"
        :data-source="data"
        style="margin-top:25px;"
        :pagination="pagination"
        :row-key="(record,index) => index"
      >
        <template slot="money" slot-scope="text, record">
          <span
            :style="record.currencyType === 'CNY' ? '': 'color:orange'"
          >{{record.currencyType === 'CNY' ? record.receivableAmount.toFixed(2) : `$${record.receivableAmount.toFixed(2)}`}}</span>
        </template>
        <span slot="do" slot-scope="record" :style="'display: flex; align-items: center;'">
          <a @click="detail(record)">详情</a>
        </span>
      </a-table>
    </div>
  </div>
</template>
<script>
import store from 'store'
import _ from 'lodash/debounce'
import { queryCustNameList } from '@/api'
import { jcQueryReceivableReportList } from '@/api/dataBI'
import { commonExport } from '@/api/request'
import moment from 'moment'
const columns = [
  {
    title: '序号',
    width: 80,
    customRender: (text, record, index) => {
      return index + 1
    }
  },
  {
    title: '应收对象',
    dataIndex: 'custName'
  },
  {
    title: '年月',
    dataIndex: 'receivableMonth',
    customRender: (text, record, index) => {
      return record.receivableMonth || '--'
    }
  },
  {
    title: '应收金额（元）',
    dataIndex: 'receivableAmount',
    scopedSlots: {
      customRender: 'money'
    }
  },
  {
    title: '操作',
    scopedSlots: {
      customRender: 'do'
    }
  }
]
export default {
  data () {
    this.onSearch = _(this.onSearch, 800)
    return {
      value: [],
      mode2: ['month', 'month'],
      form: {
        custId: '',
        startDate: '',
        endDate: ''
      },
      pageNum: 1,
      pageSize: 10,
      loading: true,
      data: [],
      columns,
      pagination: {},
      custList: []
    }
  },
  methods: {
    custListRequest (e) {
      queryCustNameList(e)
        .then(res => {
          this.custList = res.data
        })
        .catch(rs => { })
    },
    containerListRequest (e) {
      this.loading = true
      jcQueryReceivableReportList(e)
        .then(res => {
          this.$route.meta.s = e
          // store.set('JCaccountsReceivableStartDate', e.startDate)
          // store.set('JCaccountsReceivableEndDate', e.endDate)
          this.data = res.data.list
          let currentPage = this.pageNum
          this.pagination = {
            current: currentPage,
            pageSize: res.data.pageSize,
            total: res.data.total,
            showQuickJumper: false,
            showSizeChanger: true,
            showTotal: total =>
              `共${total}条记录 第${currentPage}/${res.data.pages}页`,
            onChange: pageNum => {
              this.pageNum = pageNum
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.containerListRequest(paramData)
            },
            onShowSizeChange: (current, size) => {
              this.pageNum = current
              this.pageSize = size
              let paramData = {
                pageSize: this.pageSize,
                pageNum: this.pageNum,
                ...this.form
              }
              this.containerListRequest(paramData)
            }
          }
          this.loading = false
        })
        .catch(rs => {})
    },
    onSearch (searchText) {
      this.custListRequest({
        status: 1,
        isReceivable: 1,
        nameLike: searchText,
        belongCompany: 'JIA_CHUANG',
        custTypeLike: 'SUPPLIER'
      })
    },
    restCustList () {
      this.custListRequest({
        status: 1,
        isReceivable: 1,
        belongCompany: 'JIA_CHUANG',
        custTypeLike: 'SUPPLIER'
      })
    },
    handleChange (value) {
      this.value = value
      this.form.startDate = value[0]
      this.form.endDate = value[1]
    },
    handlePanelChange2 (value, mode) {
      this.value = value
      this.form.startDate = moment(value[0]).format('YYYY-MM')
      this.form.endDate = moment(value[1]).format('YYYY-MM')
      this.mode2 = [
        mode[0] === 'date' ? 'month' : mode[0],
        mode[1] === 'date' ? 'month' : mode[1]
      ]
    },
    check () {
      this.pageNum = 1
      this.containerListRequest({
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      })
    },
    excelExport () {
      const newColumns = [
        {
          title: '客户名称',
          dataIndex: 'custName'
        },
        {
          title: '年月',
          dataIndex: 'receivableMonth'
        },
        {
          title: '应收金额（元）',
          dataIndex: 'receivableAmount'
        },
        {
          title: '币种',
          dataIndex: 'currencyType'
        }
      ]
      commonExport('containerReport/exportReceivableReportList', {
        ...this.form,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        columns: newColumns
      })
    },
    detail (e) {
      console.log(e)
      store.set('jcStartDate', e.receivableMonth)
      store.set('jcEndDate', e.receivableMonth)
      store.set('jcCurrencyType', e.currencyType)
      this.$router.push(`jcReceivableReport/detail/${e.custId}`)
    }
  },
  mounted () {
    this.restCustList()
    let originObj = this.$route.meta.s
    this.listAssign(this.form, originObj)
    if (originObj) {
      this.pageSize = originObj.pageSize
      this.pageNum = originObj.pageNum
      this.form.startDate = originObj.startDate
      this.form.endDate = originObj.endDate
      if (originObj.startDate) {
        this.value = [moment(originObj.startDate), moment(originObj.endDate)]
      } else {
        this.value = []
      }
    }
    this.containerListRequest({
      ...this.form,
      pageNum: this.pageNum,
      pageSize: this.pageSize
    })
  },
  beforeRouteEnter (to, from, next) {
    if (from.name !== 'JCaccountsReceivableDetail' || to.query.f !== '1') {
      to.meta.s = null
    }
    next()
  }
}
</script>

<style lang="less" scoped>
#takeoutMain {
  padding: 24px;
  margin: 24px;
  background: #fff;
  min-height: 700px;
}
</style>
